<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>注册</title>
	<link href="style/bootstrap.min.css" rel="stylesheet">
    <style type="text/css">
    	body{
    		padding:70px;
    	}
    </style>
  </head>
  
  <body>
  	<div class="topbar" data-dropdown="dropdown">
		<div class="topbar-inner">
			<div class="container">
				<h3>
					<a href="#">ATM注册系统</a>
				</h3>
			</div>
		</div>
	</div>
    <form id="loginForm" action="user.jspx?task=add" method="post">
    	<div class="actions">
    		用户名:<input type="text" class="text" name="username"/>
    		<span class="help-inline">2~10个字符，包括字母、数字、字母或数字结尾</span>
    	</div>
  		<div class="actions">
  			密码:<input type="password" class="text" name="password"/>
  			<span class="help-inline">6~16个字符，区分大小写</span>
  		</div>
  		<div class="actions">
  			金额:<input type="text" class="text" name="money"/>
  			<span class="help-inline">必须是大于0的纯数字</span>
  		</div>
  		<div class="actions">
  			<input id="loginBtn" class="btn large primary" type="button" value="保存"/>
  			<a class="btn success" href="index.jsp">返回</a>
  		</div>
  	</form>
  </body>
  
  <script type="text/javascript" src="script/jquery.js"></script>
  <script type="text/javascript">
  	$(document).ready(function(){
  		$("#loginBtn").click(function(){
  			var name = $("input[name='username']").val();
  			var pwd = $("input[name='password']").val();
  			var money = $("input[name='money']").val();
  			
  			if(name == "") {
  				$("input[name='username']").next("span").remove();
  				$("input[name='username']").after("<span style='color:red'>用户名不能为空</span>");
  				return;
  			}else if(!/^\w{2,10}$/.test(name)){
  				$("input[name='username']").next("span").remove();
  				$("input[name='username']").after("<span style='color:red'>用户名必须是2~10个字符之间</span>");
  				return;
  			}
  			if(pwd == "") {
  				$("input[name='password']").next("span").remove();
  				$("input[name='password']").after("<span style='color:red'>密码不能为空</span>");
  				return;
  			}else if(pwd.length < 6){
  				$("input[name='password']").next("span").remove();
  				$("input[name='password']").after("<span style='color:red'>密码长度太短</span>");
  				return;
  			}else if(pwd.length > 16){
  				$("input[name='password']").next("span").remove();
  				$("input[name='password']").after("<span style='color:red'>密码长度太长</span>");
  				return;
  			}
  			if(money == ""){
  				$("input[name='money']").next("span").remove();
  				$("input[name='money']").after("<span style='color:red'>金额不能为空</span>");
  				return;
  			}else if(!/^\d{1,}$/.test(money)){
  				$("input[name='money']").next("span").remove();
  				$("input[name='money']").after("<span style='color:red'>请输入正确的金额</span>");
  				return;
  			}
  			$("#loginForm").submit();
  		});
  		
  		$(".text").click(function(){
  			$(this).next("span").remove();
  		});
  	});
  	
  </script>
</html>
